<template>
  <div class="suggest">
    <div>搜索提示{{ keywords }}</div>
    <ul>
      <template v-if="suggestList.artists">
        <li v-for="v in suggestList.artists" :key="v.id" @click="$emit('change',v.name)">歌手：{{ v.name }}</li>
      </template>
      <template v-if="suggestList.albums">
        <li v-for="v in suggestList.albums" :key="v.id" @click="$emit('change',v.name)">专辑：{{ v.name }}</li>
      </template>
      <template v-if="suggestList.songs">
        <li v-for="v in suggestList.songs" :key="v.id" @click="$emit('change',v.name)">歌曲：{{ v.name }}</li>
      </template>
    </ul>
  </div>
</template>
<script>
export default {
  name: "SearchSuggest",
  props: ["keywords"],
  data() {
    return {
      suggestList: {},
    };
  },
  created() {
    this.loadSuggest(this.keywords);
  },
  watch: {
    keywords(val) {
      this.loadSuggest(val);
    },
  },
  methods: {
    loadSuggest(val) {
      this.axios
        .get("/search/suggest?keywords=" + val + "&type=mobile")
        .then((data) => {
          let result = data.data.result;
          this.suggestList = result;
        });
    },
  },
};
</script>
<style lang="less" scoped>
</style>